<template>
	<view class="customer-bar">
			<view class="customer-list-bar">
				<scroll-view class="customer-list" scroll-y>
					<view class="customer-item"><view class="item-timer uni-font-size-sm uni-text-color-grey">上午10点</view></view>
					<view class="customer-item ">
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
						<view class="item-content left">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"></view>
						<view class="item-content right">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
						<view class="item-content left">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"></view>
						<view class="item-content right">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
					</view><view class="customer-item ">
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
						<view class="item-content left">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"></view>
						<view class="item-content right">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
						<view class="item-content left">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"></view>
						<view class="item-content right">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
						<view class="item-content left">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"></view>
						<view class="item-content right">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
						<view class="item-content left">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"></view>
					</view>
					<view class="customer-item ">
						<view class="item-img"></view>
						<view class="item-content right">好好好好好好好好哈哈哈哈哈</view>
						<view class="item-img"><image src="../../static/images/tem/gloos.jpg" class="item-img"></image></view>
					</view>
				</scroll-view>
			</view>	
			
			<view class="customer-footer">
				<textarea :auto-height="true" maxlength="-1" type="text" class="footer-input" />
				<buttom-bar title="发送" :width="100" :height="60" :border="false" background="#1296db" color="#fff"></buttom-bar>
			</view>
	</view>
</template>

<script>
	export default {
		name: 'Customer',
		title: '客服',
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";
	.customer-bar{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.customer-list-bar{
		width: 100%;
		height: 100%;
		overflow: hidden;
		flex: 1;
	}
	.customer-list{
		width: 100%;
		height: 100%;
		padding: 20upx 30rpx;
		box-sizing: border-box;
		.customer-item{
			width: 100%;
			display: flex;
			margin-bottom: 20upx;
			.item-timer{
				width: 100%;
				display: flex;
				justify-content: center;
				margin-bottom: 10upx;
			}
			.item-img{
				width: 80upx;
				height: 80upx;
			}
			.item-content{
				flex: 1;
				position: relative;
				margin: 0 20upx;
				border-radius: 10upx;
				padding: 20upx;
				font-size: $uni-font-size-base;
				box-sizing: border-box;
				&.left{
					background: $uni-bg-color;
					&::before{
						content: '';
						position: absolute;
						top: 30upx;
						left: -20upx;
						border: solid 10upx transparent;
						border-right-color: $uni-bg-color;
					}
				}
				&.right{
					background: $uni-color-success;
					&::before{
						content: '';
						position: absolute;
						top: 30upx;
						right: -20upx;
						border: solid 10upx transparent;
						border-left-color: $uni-color-success;
					}
				}
			}
		}
	}
	.customer-footer{
		width: 100%;
		background: $uni-text-color-inverse;
		display: flex;
		align-items: flex-end;
		padding: 10upx 30upx;
		box-sizing: border-box;
		overflow: hidden;
		.footer-input{
			flex: 1;
			line-height: 40upx;
			max-height: 150upx;
			padding: 10upx 0;
			text-indent: 1em;
			background: $uni-bg-color-grey;
			margin-right: 20upx;
			border-radius: 10upx;
			color: $uni-text-color-grey;
			font-size: $uni-font-size-base;
		}
	}
</style>
